<!DOCTYPE html>
<html>
<head>
    <style>
        .array-container {
            display: flex;
            align-items: flex-end;
            height: 300px;
            padding: 20px;
            gap: 2px;
        }
        .array-bar {
            width: 30px;
            background-color: #90CAF9;
            transition: all 0.3s;
            display: flex;
            align-items: flex-end;
            justify-content: center;
            padding-bottom: 5px;
            font-size: 12px;
            color: #333;
        }
    </style>
</head>
<body style="background: #f0f0f0; margin: 0; display: flex; justify-content: center; align-items: center; height: 100vh;">
    <div class="array-container">
        <div class="array-bar" style="height: 30px;">3</div>
        <div class="array-bar" style="height: 220px;">44</div>
        <div class="array-bar" style="height: 190px;">38</div>
        <div class="array-bar" style="height: 25px;">5</div>
        <div class="array-bar" style="height: 235px;">47</div>
        <div class="array-bar" style="height: 75px;">15</div>
        <div class="array-bar" style="height: 180px;">36</div>
        <div class="array-bar" style="height: 130px;">26</div>
        <div class="array-bar" style="height: 135px;">27</div>
        <div class="array-bar" style="height: 10px;">2</div>
        <div class="array-bar" style="height: 230px;">46</div>
        <div class="array-bar" style="height: 20px;">4</div>
        <div class="array-bar" style="height: 95px;">19</div>
        <div class="array-bar" style="height: 250px;">50</div>
        <div class="array-bar" style="height: 240px;">48</div>
    </div>
    <script>
        const bars = document.querySelectorAll('.array-bar');
        let values = Array.from(bars).map(bar => parseInt(bar.textContent));
        
        async function mergeSort(start = 0, end = values.length - 1) {
            if (start >= end) return;
            
            const mid = Math.floor((start + end) / 2);
            
            // 递归排序左右两半
            await mergeSort(start, mid);
            await mergeSort(mid + 1, end);
            
            // 合并过程
            const temp = [];
            let i = start, j = mid + 1;
            
            // 高亮显示正在合并的部分
            for(let k = start; k <= end; k++) {
                bars[k].style.backgroundColor = '#FF9800';
            }
            await new Promise(resolve => setTimeout(resolve, 500));
            
            while(i <= mid && j <= end) {
                if(values[i] <= values[j]) {
                    temp.push(values[i]);
                    i++;
                } else {
                    temp.push(values[j]);
                    j++;
                }
            }
            
            while(i <= mid) temp.push(values[i++]);
            while(j <= end) temp.push(values[j++]);
            
            // 更新视图
            for(let k = 0; k < temp.length; k++) {
                values[start + k] = temp[k];
                bars[start + k].style.height = `${temp[k] * 5}px`;
                bars[start + k].textContent = temp[k];
                bars[start + k].style.backgroundColor = '#4CAF50';
                await new Promise(resolve => setTimeout(resolve, 100));
            }
            
            // 恢复颜色
            await new Promise(resolve => setTimeout(resolve, 300));
            for(let k = start; k <= end; k++) {
                bars[k].style.backgroundColor = '#90CAF9';
            }
        }

        setTimeout(mergeSort, 1000);
        setInterval(() => {
            // 重置颜色和位置
            values = [3,44,38,5,47,15,36,26,27,2,46,4,19,50,48];
            bars.forEach((bar, index) => {
                bar.style.backgroundColor = '#90CAF9';
                bar.style.height = `${values[index] * 5}px`;
                bar.textContent = values[index];
            });
            mergeSort();
        }, 15000); // 每15秒重新开始
    </script>
</body>
</html> 